<template>
  <div class="goodsadd">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/goods' }">商品列表</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>

    <hr>

    <el-tabs tab-position="left" class="demo-tabs">
      <el-tab-pane label="商品描述">
         <div class="editBox">
            <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editorRef"
              :defaultConfig="{}"
            />
            <Editor
              style="height: 500px; overflow-y: hidden;"
              v-model="addinfo.goods_introduce"
              :defaultConfig="{}"
              :mode="'default'"
              @onCreated="handleCreated"
            />
         </div>
      </el-tab-pane>
      <el-tab-pane label="静态信息">
        <!-- 级联选择器 -->
        <el-cascader
          v-model="addinfo"
          :options="catlist"
          :props="{expandTrigger: 'hover', children: 'children', label: 'cat_name', value: 'cat_id'}"
        />
      </el-tab-pane>
      <el-tab-pane label="参数信息">参数信息</el-tab-pane>
      <el-tab-pane label="相关图片">相关图片</el-tab-pane>
    </el-tabs>

    <hr>
    <el-button type="warning" disabled>确认添加</el-button>
  </div>
</template>

<script>
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default {
  name: 'oaGoodsAdd',
  data () {
    return {
      editorConfig: {
        placeholder: '请输入内容...'
      },
      editorRef: null,
      addinfo: {},
      catlist: []
    }
  },
  methods: {
    handleCreated (editor) {
      this.editorRef = Object.seal(editor)
    },
    // 获取分类列表
    async getCatList () {
      const res = await this.$http.get('categories')
      if (res.meta.status !== 200) return
      this.catlist = res.data
    }
  },
  created () {
    this.getCatList()
  },
  components: { Editor, Toolbar }
}

</script>

<style lang="scss">
.editBox{
  height: 500px;
  border: 1px solid #ccc;
}
</style>
